.detail {
  @apply w-screen relative max-h-screen;

  .maskBg {
    @apply w-full h-full absolute top-0 left-0 object-cover z-1;
  }

  .maskLinear {
    @apply w-full h-full absolute top-0 left-0 z-1;
    &::before {
      @apply absolute top-0 left-0 h-full bg-bg;
      width: 20%;
      content: '';
    }
    &::after {
      @apply absolute h-full top-0 right-0;
      width: 80%;
      content: '';
      background: linear-gradient(90deg, #0f0f0f 0%, rgba(16, 16, 16, 0) 100%);
    }
  }

  .content {
    @apply w-full h-auto absolute top-0 left-0 z-2;
    padding-bottom: 3.75rem;

    &::after {
      @apply absolute bottom-0 left-0 right-0;
      content: '';
      height: 3.75rem;
      background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #141414 100%);
    }

    .back {
      @apply h-5 text-white opacity-60 text-base flex items-center cursor-pointer w-fit;
      margin: 6.25rem 0 2.125rem 3.375rem;

      & > img {
        @apply w-5 h-5 object-contain;
      }

      span {
        @apply ml-5;
      }

      &:hover {
        @apply opacity-100;
      }
    }

    .main {
      @apply flex w-screen;
      padding: 0 8.125rem;

      .poster {
        @apply rounded shrink-0;
        width: 19.167vw;
        height: 28.75vw;
        margin-right: 2.75rem;

        & > img {
          @apply w-full h-full;
        }
      }

      .mainRight {
        width: calc(68vw - 3.375rem);

        .title {
          @apply text-2xl font-bold text-white mb-2 leading-9;
        }

        .infos {
          @apply flex items-center flex-wrap h-fit my-5;

          .tag {
            @apply flex mr-4;

            .item {
              @apply text-base mr-1 rounded-sm leading-5 text-white px-3 py-1 whitespace-nowrap;
              background: rgba(255, 255, 255, 0.1);
            }
          }

          span {
            @apply text-white-60;
          }
        }

        .scoreBox {
          @apply flex mt-4;

          .mark {
            @apply text-lg text-white-80 flex items-center;
            line-height: 1.125rem;

            &:nth-child(1) {
              margin-right: 1.875rem;
            }

            .tmdb {
              @apply mr-2;
              height: 1.125rem;
            }

            .douban {
              @apply mr-1;
              width: 0.875rem;
              height: 0.875rem;
            }

            .tmdbText {
              @apply text-base font-semibold leading-4;
              color: #92dbcc;
            }

            .doubanText {
              @apply text-base font-semibold leading-4;
              color: #00ba03;
            }
          }
        }

        .guide {
          @apply flex items-center font-semibold text-lg whitespace-nowrap cursor-pointer rounded;
          background: linear-gradient(90deg, #ffe5d8 0%, #ffbd8d 100%);
          padding: 0.875rem 1.25rem;
          color: #7c3c19;
          width: 20.875rem;
          height: 2.875rem;
          margin: 1.875rem 0 1.25rem;

          &.guideOpen {
            width: 17.5625rem;
          }

          .vip {
            width: 1.125rem;
            height: 1.125rem;
            margin-right: 0.625rem;
          }

          .span {
            @apply font-bold;
            color: #ea0000;
          }
        }

        .detailMenuGroup {
          @apply flex mt-5 mb-10 flex-nowrap;

          .btn {
            @apply text-white;
            width: 8.75rem;
            height: 2.875rem;
            background: rgba(255, 255, 255, 0.2);

            &:not(:first-child) {
              @apply ml-5;
            }

            .img {
              width: 1.125rem;
              height: 1.125rem;
            }

            &.mbtn {
              @apply bg-white text-black;

              &:hover {
                @apply bg-white-60;
              }

              & > span {
                @apply font-semibold;
              }

              &.btnDetail {
                &:hover {
                  @apply bg-white-40;
                }

                @apply bg-white-10 ml-4;

                & > span {
                  @apply text-white;
                }
              }
            }

            &.share {
              @apply relative;

              .corn {
                @apply absolute;
                width: 1.375rem;
                height: 1.375rem;
                right: -0.625rem;
                top: -0.625rem;
                perspective: 50px;
                transform-style: preserve-3d;
                animation: scales 0.5s 8;
              }

              @keyframes scales {
                0% {
                  transform: rotateY(0deg);
                }

                100% {
                  transform: rotateY(180deg);
                }
              }
            }

            &.download {
              @apply relative;

              &::after {
                @apply absolute w-full left-0;
                height: 0.625rem;
                content: '';
                top: 2.875rem;
              }

              &:hover {
                background: rgba(255, 255, 255, 0.16);

                .floatBox {
                  @apply block;
                }
              }

              .floatBox {
                @apply absolute hidden;
                top: 3.5rem;
              }

              & > img {
                @apply w-4 h-4;
              }
            }
          }
        }

        .mdesc {
          @apply text-white-60 mb-4;
        }

        .mdescInfo {
          @apply text-white text-base leading-7 w-full overflow-hidden;
          display: -webkit-box;
          -webkit-line-clamp: 3;
          -webkit-box-orient: vertical;
        }

        .actors {
          @apply flex w-full;
          margin-top: 3.25rem;

          .actorItem {
            width: 50%;
            height: auto;

            &:first-child {
              @apply mr-4;
            }

            .items {
              @apply text-white w-full flex-nowrap flex overflow-hidden;
              height: 1.125rem;

              .personLink {
                @apply text-base;
                line-height: 1.125rem;
              }

              .personLink:hover {
                @apply text-theme cursor-pointer;
              }
            }

            span {
              @apply text-white-60 text-base;
            }
          }
        }
      }
    }
  }
}

.chooseDrama {
  @apply flex mt-12;

  .sort {
    @apply ml-10;
  }
}

.dramaList {
  @apply flex flex-wrap;
  margin-top: 1.875rem;

  .listItem {
    @apply flex bg-bg rounded mt-3 relative overflow-hidden;
    width: calc(calc(100% - 0.75rem) / 2);

    .seeOverView {
      @apply absolute right-0 bottom-0 z-2;
      width: 50%;
      height: 56%;
    }

    &:nth-child(2n + 1) {
      @apply mr-3;
    }

    &:nth-child(1),
    &:nth-child(2) {
      @apply mt-0;
    }

    &:hover {
      &::after {
        @apply absolute left-0 top-0 w-full h-full;
        content: '';
        background: rgba(255, 255, 255, 0.15);
      }
    }

    .dramaInfo {
      @apply flex flex-col justify-center px-5;
      width: calc(calc(100% - 0.75rem) / 2);

      .dramaTitle {
        @apply w-full text-white text-xl leading-6 mb-5;

        span:first-child {
          @apply mr-2;
        }
      }

      .dramaDesc {
        @apply overflow-hidden text-white-60 text-sm;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
      }
    }

    .poster {
      width: calc(calc(100vw - 6.75rem) / 4);
      height: calc(calc(100vw - 6.75rem) / 4 * 0.5631);

      & > img {
        @apply w-full h-full rounded;
      }
    }
  }
}

// 移动端
@media screen and (max-width: 767px) {
  .detailPhone {
    margin-top: 5.875rem;

    .posterBox {
      @apply relative;
      & > img {
        @apply w-full;
        aspect-ratio: 53/22;
      }

      &::after {
        @apply absolute left-0 bottom-0 w-full;
        content: '';
        height: 3.75rem;
        background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #141414 100%);
      }
    }

    .scoreBox {
      @apply inline-flex px-4 mt-4 items-center h-full flex-nowrap;

      .mark {
        @apply text-xs text-white-80 leading-4 flex items-center;

        &:nth-child(1) {
          @apply mr-3;
        }

        .tmdb {
          @apply mr-1 h-4 w-6;
        }

        .douban {
          @apply mr-1 h-4 w-4;
        }

        .tmdbText {
          @apply font-semibold leading-4;
          color: #92dbcc;
        }

        .doubanText {
          @apply font-semibold leading-4;
          color: #00ba03;
        }
      }

      & > span {
        @apply text-white-60 text-xs leading-3;
        font-family: Alibaba PuHuiTi 2;
      }
    }

    .title {
      @apply text-xl leading-5 px-4 font-bold text-white mb-0;
      margin-top: 0.625rem;
    }

    .tag {
      @apply flex px-4 my-2 mr-4 text-white-60 flex-nowrap overflow-x-auto;

      .item {
        @apply text-xs mr-1 rounded-sm text-white h-5 leading-5 whitespace-nowrap mb-1 bg-white-10;
        padding: 0 0.625rem;
        font-family: Alibaba PuHuiTi 2;
      }
    }

    .detailMenuGroup {
      @apply flex my-5 px-4 flex-nowrap;

      .btn {
        width: 2.25rem;
        height: 2.25rem;
        background: rgba(255, 255, 255, 0.1);

        &:not(:first-child) {
          @apply ml-5;
        }

        &.mbtn {
          @apply bg-white text-black;
          width: 6.25rem;

          & > span {
            @apply font-semibold;
          }
        }

        &.share {
          @apply relative;

          .corn {
            @apply absolute;
            width: 0.9375rem;
            height: 0.9375rem;
            right: -0.375rem;
            top: -0.375rem;
          }
        }

        &.download {
          & > img {
            @apply w-4 h-4;
          }
        }
      }
    }
  }

  .chooseDrama {
    @apply flex my-5 px-4 justify-between h-8;

    .selectPhone {
      width: 11.25rem !important;
    }

    .sort {
      @apply w-8;
    }
  }

  .dramaList {
    @apply flex-nowrap overflow-x-auto mt-0 mb-5 px-4 pb-1;

    .listItem {
      @apply mt-0 shrink-0 flex-col mr-2 pb-3;
      width: calc(calc(100vw - 2.5rem) / 2);
      background: #262626;

      &:nth-child(2n + 1) {
        @apply mr-2;
      }

      &:hover {
        &::after {
          background: transparent;
        }
      }

      .poster {
        @apply w-full relative;
        height: calc(calc(100vw - 2.5rem) / 2 * 0.5631);

        &::after {
          @apply absolute left-0 bottom-0 w-full h-10;
          content: '';
          background: linear-gradient(180deg, rgba(37, 37, 37, 0) 0%, #252525 100%);
        }

        .playPhone {
          @apply absolute h-6 w-6 right-3 bottom-2 z-2;
        }
      }

      .dramaInfo {
        @apply justify-start px-2 w-full;

        .dramaTitle {
          @apply text-sm leading-6 my-2;

          span:first-child {
            @apply mr-2;
          }
        }

        .dramaDesc {
          @apply overflow-hidden text-white-60 text-xs;
          display: -webkit-box;
          -webkit-line-clamp: 3;
          -webkit-box-orient: vertical;
        }
      }

      .seeOverView {
        @apply absolute right-0 bottom-3 z-2 text-theme text-xs leading-4 h-4 text-right pr-2;
        font-family: Alibaba PuHuiTi 2;
        width: 3.125rem;
        background: linear-gradient(270deg, #262626 65%, rgba(38, 38, 38, 0) 100%);
      }
    }
  }

  .actorBoxPhone {
    .actorBox {
      @apply px-4 flex text-sm text-white-80 w-full flex-wrap overflow-hidden;
      font-family: Alibaba PuHuiTi 2;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      & > span {
        @apply shrink-0;
      }
    }

    .infoLabel {
      @apply text-white-60;
    }

    .mdesc {
      @apply text-white-80 mt-3 px-4 overflow-hidden relative text-sm;
      font-family: Alibaba PuHuiTi 2;

      &.mExpend {
        max-height: 2.4rem;
      }

      &.openExpend {
        max-height: 100vh;
        -webkit-line-clamp: 20000;
      }
    }

    .expendBtn {
      @apply absolute bottom-0 right-0 text-theme flex items-center mt-1 w-fit px-4;
      background: linear-gradient(270deg, #141414 64%, rgba(20, 20, 20, 0) 100%);

      &.expendBtnOpen {
        .img {
          transform: rotate(0deg);
        }
      }

      .img {
        @apply ml-1;
        transition: all 0.2s;
        transform: rotate(-90deg);
      }
    }
  }
}
